<template>
    <div class="shopping-cart">
            <!-- 导航链接 -->
            <NavigationBar />
      <h1>购物车</h1>
      <ul v-if="cartItems.length">
        <li v-for="item in cartItems" :key="item.id">
          {{ item.name }} - ￥{{ item.price }} - 数量: {{ item.quantity }}
          <button @click="removeItem(item)">移除</button>
        </li>
      </ul>
      <p v-else>购物车为空</p>
      <p class="total">总计: ￥{{ total }}</p>
      <button @click="checkout">结算</button>
          <!-- 底部信息 -->
    <Footer />
    </div>
  </template>
  
  <script>
    import Footer from '@/components/Footer.vue';
import NavigationBar from '@/components/NavigationBar.vue';

  export default {
    name: 'ShoppingCart',
    components: {
    NavigationBar,
    Footer
  },
    data() {
      return {
        cartItems: [
          // 示例购物车数据
          { id: 1, name: '猫砂', price: 50, quantity: 2 },
          { id: 2, name: '狗粮', price: 80, quantity: 1 },
          // 更多购物车项...
        ]
      };
    },
    computed: {
      total() {
        return this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
      }
    },
    methods: {
      removeItem(item) {
        // 移除购物车项的逻辑
        const index = this.cartItems.findIndex(cartItem => cartItem.id === item.id);
        if (index !== -1) {
          this.cartItems.splice(index, 1);
        }
      },
      checkout() {
        // 结算购物车的逻辑
        if (this.cartItems.length) {
          console.log('结算购物车:', this.cartItems);
          // 这里可以添加进一步的结算逻辑，如调用支付接口等
        } else {
          alert('购物车为空，无法结算');
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .shopping-cart {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  li {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  .total {
    font-weight: bold;
    margin-top: 20px;
  }
  </style>